<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="template::header"></head>
<body>
<!--现在还调节样式，先在里面呆着 做好了再丢到cdn-->
<style>
    #generateCenter {
        margin-top: 200px;
        margin-right: auto;
        margin-left: auto;
        border: 2px solid #CCC;
        border-radius: 5px;
        width: 520px;
        background: rgba(204, 204, 204, 0.75);
    }
    .hint-info {
        text-align: right;
        margin-right: 15px
    }

    #withOutLogin {
        position: absolute;
        top: 0px;
        right: 50px;
        font-size: 30px;
        text-decoration: none;
    }
    .hidden{
        display: none !important;
    }

    #mainContent {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        top: 50px;
        /*position: absolute;*/
    }

    #header-bar {
        width: 100%;
        height: 40px;
        top: 0px;
        left: 0px;
        position: fixed;
        background: rgba(50,50,50,0.75);
    }

    #background {
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0px;
        left: 0px;
        background-image: url('https://cdn.suimg.cn/website/suimg.cn/images/bg/slide-06.jpg');
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        z-index: -999;
        filter: blur(5px);
        opacity: 0.9;
    }

    #footer {
        text-align: center;
        position: fixed;
        width: 100%;
        bottom: 0px;
    }

    .geetest_feedback,.geetest_copyright,.geetest_logo,.geetest_success_logo,.geetest_feedback{
        display:none !important;
    }
    .geetest_btn{
        left: 45px;
    }
</style>
<script type="text/javascript" src="//cdn.suimg.cn/website/suimg.cn/js/gt.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $.initCaptcha = function (){
            $("#captcha").html(' <p id="waitCaptcha" class="show">正在加载验证码......</p>');
            $.get("/getCaptcha.do", {
                "t": Math.random()
            }, function (data) {
                initGeetest({
                    gt: data.gt,
                    challenge: data.challenge,
                    new_captcha: data.new_captcha,
                    offline: !data.success,
                    product: "float",
                    width: "100%"
                }, function (captcha) {
                    $.captcha = captcha;
                    captcha.appendTo("#captcha");
                    $("#waitCaptcha").remove();
                });
            }, "JSON");
        };

        $.createCallback = function(data){
            $("#step1").fadeOut();
            $("#publishId").val(data.publishId);
            $("#publishKey").val(data.publishKey);
            $("#publishUrl").val(data.publishUrl);
            $("#step2").fadeIn();
        }

        $("#generateForm").submit(function(){
            if ($.captcha.getValidate() !== undefined) {
                $.post('/checkWechatInfo.do', $("#generateForm").serialize(), function (response) {
                    if(response.retcode == 0){
                        $.createCallback(response.databody);
                    }else {
                        $.msgbox.warning(response.message);
                        $.initCaptcha();
                    }
                }, "JSON");
            }else{
                $.msgbox.warning("请先通过验证码");
            }
            return false;
        });

        /**
         * 推送按钮表单提交事件
         */
        $("#publishForm").submit(function (){
            $.get($("#publishUrl").val(),{
                title:$("#publishTitle").val(),
                content:$("#publishContent").val()
            },function(response){
                if(response.retcode == 0){
                    $.msgbox.success("推送成功");
                }else {
                    $.msgbox.warning(response.message);
                }
            },"JSON");
           return false;
        });

        $.initCaptcha();
    });
</script>
<div id="mainContent" class="content section">
    <div id="generateCenter">
        <div id="step1" >
            <form id="generateForm" method="post" autocomplete="off" action="/" class="form-horizontal">
                <br/><br/>
                <div class="form-group">
                    <label class="control-label col-sm-3">企业微信ID</label>
                    <div class="col-sm-8">
                        <input type="text" name="corpId" class="form-control"/>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <label class="control-label col-sm-3">企业微信密钥</label>
                    <div class="col-sm-8">
                        <input type="password" name="corpSecret" class="form-control"/>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <label class="control-label col-sm-3">推送应用ID</label>
                    <div class="col-sm-8">
                        <input type="text" name="agentId" class="form-control"/>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <div class="col-lg-10">
                        <div id="captcha">
                            <p id="waitCaptcha" class="show">正在加载验证码......</p>
                        </div>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <div style="text-align: center;">
                        <button type="submit" class="btn btn-primary">生成Key</button>
                    </div>
                    <div class="hint-info">
                        <p>不知道怎么用?<a target="_blank" href="https://doc.suimg.cn/web/#/14">在线接口文档</a></p>
                    </div>
                </div>
            </form>
        </div>
        <div id="step2" style="display: none;">
            <form id="publishForm" method="post" autocomplete="off" action="/" class="form-horizontal">
                <br/><br/>
                <div class="form-group">
                    <label class="control-label col-sm-2"  for="publishId">推送ID</label>
                    <div class="col-sm-10">
                        <input type="text" id="publishId" class="form-control" readonly="readonly"/>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <label class="control-label col-sm-2" for="publishKey">推送密钥</label>
                    <div class="col-sm-10">
                        <input type="text" id="publishKey" class="form-control" readonly="readonly" />
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <label class="control-label col-sm-2"  for="publishUrl">推送地址</label>
                    <div class="col-sm-10">
                        <input type="text" id="publishUrl" class="form-control" readonly="readonly"/>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <label class="control-label col-sm-2"  for="publishTitle">推送标题</label>
                    <div class="col-sm-10">
                        <input type="text" id="publishTitle" class="form-control"/>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <label class="control-label col-sm-2"  for="publishContent">推送内容</label>
                    <div class="col-sm-10">
                        <input type="text" id="publishContent" class="form-control"/>
                    </div>
                </div>

                <br/>
                <div class="form-group">
                    <div style="text-align: center;">
                        <button type="submit" class="btn btn-primary">推送测试</button>
                    </div>
                    <div class="hint-info">
                        <p>不知道怎么用?<a target="_blank" href="https://doc.suimg.cn/web/#/14">在线接口文档</a></p>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
</body>
<footer th:replace="template::footer"></footer>
</html>
